<template>
  <div class="">
    <!-- <button @click="toggleWeekends">toggle weekends</button> -->
    <FullCalendar :options="calendarOptions" />
  </div>
</template>

<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'
export default {
  components: {
    FullCalendar // make the <FullCalendar> tag available
  },
  data () {
    return {
      calendarOptions: {
        plugins: [dayGridPlugin, interactionPlugin],
        initialView: 'dayGridMonth',
        dateClick: this.handleDateClick,
        events: [
          { title: 'event 1', date: '2019-04-01' },
          { title: 'event 2', date: '2019-04-02' }
        ]
      }
    }
  },
  created () {
    console.log(document.getElementsByClassName('fc-next-button'))
  },
  methods: {
    handleDateClick: function (arg) {
      console.log(arg)
    //   alert('date click! ' + arg.dateStr)
    }
  }
}
</script>

<style lang='less'></style>
